<template>
	<view>
		<view class="fixed">
			<z-nav-bar title="训练课程"></z-nav-bar>
			<view class="option">
				<view :class="!type ? ['row', 'active'] : ['row']" @click="change_type(0)">
					私教课
					<text v-if="!type"></text>
				</view>
				<view :class="type == 1 ? ['row', 'active'] : ['row']" @click="change_type(1)">
					体系课
					<text v-if="type == 1"></text>
				</view>
				<view :class="type == 2 ? ['row', 'active'] : ['row']" @click="change_type(2)">
					1对1答疑
					<text v-if="type == 2"></text>
				</view>
			</view>
		</view>
		<swiper class="swiper" :style="{ height: `calc(100vh - ${heights}px)` }" @change="change" :current="type">
			<swiper-item>
				<view class="person">
					<view class="search">
						<input v-model="course.name" placeholder="输入课程关键词搜索" placeholder-class="placeholder" />
						<image :src="`${setting.sImgUrl}/find/search.png`"></image>
					</view>
					<view class="info">
						<scroll-view
							scroll-y
							class="coach"
							:style="{ height: `calc(100vh - ${coachHeight}px)` }"
							@scrolltolower="next(0)"
						>
							<view v-if="coach.list && coach.list.length">
								<view
									:class="v.instructorId == course.instructorId ? ['row', 'active'] : ['row']"
									v-for="(v, k) in coach.list"
									:key="k"
									@click="chose_coach(v.instructorId)"
								>
									<view class="line" v-if="v.instructorId == instructorId"></view>
									<image
										:src="setting.oss_pub_domain + v.instructorAvatar"
										style="flex-shrink: 0"
									></image>
									<view style="width: 130rpx">
										<view class="u-line-1">{{ v.instructorName }}</view>
										<view class="tag">教练</view>
									</view>
								</view>
							</view>
							<z-no-data v-else width="100"></z-no-data>
						</scroll-view>
						<view class="line"></view>
						<scroll-view
							scroll-y
							class="right"
							:style="{ height: `calc(100vh - ${coachHeight}px)` }"
							@scrolltolower="next(1)"
						>
							<view class="qa">
								<view>训练遇到难题？咨询教练</view>
								<view class="msg">发起消息</view>
							</view>
							<view class="entry">
								<view class="step">
									<!-- <view class="top">
										<view class="tag">
											<view>第一阶段</view>
										</view>
										<view>高尔夫基础</view>
									</view> -->
									<z-no-data
										v-if="!course.list || (!course.list.length && !loading)"
										placeholder="暂无课程"
									></z-no-data>
									<view v-else class="lesson">
										<view
											v-for="course in course.list"
											:key="course.id"
											class="rows"
											@click="viewCourse(course)"
										>
											<view class="text">
												第{{ course.serialNumber }}课
												<text>{{ course.name }}</text>
											</view>
											<view v-if="course.beginTime">{{ course.beginTime }}</view>
											<view v-else class="dis">未排课</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="open" scroll-y :style="{ height: `calc(100vh - ${heights}px)` }">
					<view v-if="openCourse.list && openCourse.list.length" class="entry">
						<navigator
							v-for="course in openCourse.list"
							:key="course.id"
							class="row"
							hover-class="none"
							:url="`/pages/student/course/open?id=${course.id}`"
						>
							<image :src="setting.oss_pub_domain + course.coverImage" mode="aspectFill"></image>
							<view class="right">
								<view>{{ course.name }}</view>
								<view class="second">
									<view>课程: {{ course.duration }}课</view>
									<view class="line"></view>
									<view>
										兑换:
										<text v-if="course.tuition">{{ course.tuition }}</text>
										<text v-else>免费</text>
									</view>
								</view>
								<view class="bottom">
									<view class="left">
										<image :src="setting.oss_pub_domain + course.instrutorAvatar"></image>
										<text>{{ course.instrutorName }}</text>
									</view>
									<view class="other">
										<image :src="`${setting.sImgUrl}/index/icon_drop-down@2x.png`"></image>
										<text>{{ course.buyCount }}</text>
									</view>
								</view>
							</view>
						</navigator>
					</view>
					<z-no-data v-else placeholder="暂无体系课"></z-no-data>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="answer" scroll-y :style="{ height: `calc(100vh - ${heights}px)` }">
					<view class="btn">
						<text :class="currentIndex === 0 ? 'active' : ''" @click="qaList(0)">未解答</text>
						<text :class="currentIndex === 1 ? 'active' : ''" @click="qaList(1)">已解答</text>
					</view>
					<view class="content">
						<view style="height: 30rpx"></view>
						<view class="tip">
							<view>
								<view>打不好 有难题</view>
								<view class="text">来试试1对1答疑</view>
								<view @click="to_answer()"><text>发起答疑</text></view>
							</view>
							<image :src="`${setting.sImgUrl}/kl.png`"></image>
						</view>
						<view v-if="listData && listData.length">
							<view class="row" v-for="item in listData" :key="item.id" @click="toIm(item.chatGroup)">
								<view class="top">
									<view class="left">
										<image :src="`${setting.sImgUrl}/qas.png`"></image>
										<text class="answer-title">{{ item.title }}</text>
									</view>
									<view :class="item.status ? 'already' : ''">
										{{ item.status ? '已解答' : '未解答' }}
									</view>
								</view>
								<view class="detail">
									<image
										:src="`https://jgtygolf-public.oss-cn-beijing.aliyuncs.com${item.instructorAva}`"
									></image>
									<view>
										<view class="name">{{ item.instructorName }}</view>
										<view class="cate">{{ item.description ? item.description[0] : '' }}</view>
										<view class="cate">{{ item.description ? item.description[1] : '' }}</view>
										<view class="time">{{ item.updateTime }}</view>
									</view>
								</view>
							</view>
						</view>
						<z-no-data v-else placeholder="暂无问答"></z-no-data>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getCoach, courseOnlyStu, getMyOpenCourse, courseOnlyStuDetail, getQaList } from '@/api/student';
export default {
	data() {
		return {
			type: 0,
			coach: {
				list: [],
				pageNum: 1,
				total: 0
			},
			course: {
				list: [],
				pageNum: 1,
				total: 0,
				name: '',
				instructorId: 0
			},
			openCourse: {
				list: [],
				pageNum: 1,
				total: 0
			},
			heights: '',
			coachHeight: 0,
			loading: true,
			listData: [],
			currentIndex: 0
		};
	},
	methods: {
		async qaList(index) {
			//获取一对一答疑数据
			const res = await getQaList({ status: index });
			// console.log(res)
			this.currentIndex = index;
			res.rows.forEach((el) => {
				if (el.description && el.description.length > 3) {
					el.description = el.description.split(',');
				}
			});
			this.listData = res.rows;
		},
		toIm(id) {
			uni.navigateTo({
				url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=group_' + id,
				animationDuration: 300
			});
		},
		to_answer() {
			uni.navigateTo({
				url: '/pages/student/answer/answer'
			});
		},
		change_type(type) {
			this.type = type;
		},
		change(res) {
			this.type = res.detail.current;
		},
		chose_coach(id) {
			this.course.list = [];
			this.course.name = '';
			this.course.instructorId = id;
			this.getList(1);
		},
		getList(type) {
			// type 0 教练 1 私教课 2 体系课
			const Objs = [
				{
					funName: getCoach,
					keyName: 'coach'
				},
				{
					funName: courseOnlyStu,
					keyName: 'course'
				},
				{
					funName: getMyOpenCourse,
					keyName: 'openCourse'
				}
			];
			const funName = Objs[type].funName;
			const keyName = Objs[type].keyName;
			const param = {
				pageNum: this[keyName].pageNum,
				pageSize: 20
			};
			if (type == 1) {
				if (this.course.name) param.name = this.course.name;
				if (this.course.instructorId) param.instructorId = this.course.instructorId;
			}
			this.loading = true;
			funName(param)
				.then((res) => {
					const { rows, total } = res;
					console.log(res);
					if (this[keyName].pageNum === 1) this[keyName].list = rows;
					else this[keyName].list.push(...rows);
					this[keyName].total = total;
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
				});
		},
		next(type) {
			const keyName = ['coach', 'course', 'openCourse'][type];
			if (this[keyName].list.length >= this[keyName].total) return;
			this[keyName].pageNum += 1;
			this.getList(type);
		},
		viewCourse(item) {
			item.studentSide = 1
			uni.setStorageSync('edit-course', item);
			uni.navigateTo({
				url: '/pages/course/details/details'
			});
		}
	},
	onLoad(opt) {
		this.type = parseInt(opt.type || 0);
		this.getList(0);
		this.getList(1);
		this.getList(2);
		this.qaList(0);
	},
	mounted() {
		uni.createSelectorQuery()
			.select('.fixed')
			.boundingClientRect((data) => {
				this.heights = data.bottom;
			})
			.exec();
		uni.createSelectorQuery()
			.select('.search')
			.boundingClientRect((data) => {
				this.coachHeight = data.bottom;
			})
			.exec();
	}
};
</script>
<style>
@import './css/entry.css';
.answer-title {
	width: 440rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
